<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guitar Tab Scrolling Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background-color: #121212; /* 深色背景 */
            color: #e0e0e0; /* 浅色文本 */
        }

        .section {
            margin: 0;
            padding: 0;
            /* 不要设置固定高度，让内容自适应 */
            display: block;
            background-color: #1e1e1e;
        }

        .section img {
            display: block; /* 确保图片独占一行，移除行内元素间隙 */
            width: 100%; /* 按需要让图片撑满容器宽度 */
            height: auto; /* 保持图片比例 */
            margin: 0;
            padding: 0;
            object-fit: cover; /* 若想图片充满整个区域，没有黑边 */
        }

        #controls {
            position: fixed;
            top: 10px;
            left: 10px;
            background: rgba(0, 0, 0, 0.5); /* 使用rgba来实现半透明背景 */
            color: #e0e0e0; /* 浅色文本 */
            padding: 10px;
            border: 1px solid #555;
            z-index: 1000;
            border-radius: 5px; /* 可选，为了美观可以稍微增加圆角 */
        }

        /* 按钮的半透明背景及字体 */
        #controls button {
            background-color: rgba(68, 68, 68, 0.7); /* 半透明背景 */
            color: rgba(224, 224, 224, 0.8); /* 半透明字体颜色 */
            border: none;
            padding: 8px 16px;
            cursor: pointer;
            margin-right: 5px;
            border-radius: 3px; /* 可选，增加圆角 */
        }

        /* 按钮悬停时略微变化的透明度 */
        #controls button:hover {
            background-color: rgba(85, 85, 85, 0.7);
            color: rgba(224, 224, 224, 0.9);
        }
    </style>
</head>
<body>

<div id="controls">
    <button id="startScroll">开始滚动</button>
    <button id="stopScroll">停止滚动</button>
    <button id="switchStyle" onclick="window.location.href='{% url 'simple_guitar_tab_view' guitar_tab.id %}'">切换风格
    </button>
    <button id="goHome" onclick="window.location.href='/guitar/guitar_tabs/'">返回主页
    </button>
</div>

<!-- 动态加载吉他谱图片 -->
<div id="guitar-tabs-container">
    {% for image in image_urls %}
        <div class="section">
            <img src="{{ image.url }}" alt="Guitar Tab Image">
        </div>
    {% endfor %}
</div>

<script>
    let scrollSequence = [
        {% for image in image_urls %}
            {
                start: {{ forloop.counter0 }} * 1000,
                end: {{ forloop.counter }} * 1000,
                speed: {{ image.scroll_speed }},
                rollbackTo:
                {% if image.rollback_to is not None %}
                    {{ image.rollback_to }} * 1000,
                {% else %}
                    {{ forloop.counter0 }} * 1000,
                {% endif %}
                rollbackTimes: {{ image.rollback_times }}
            },
        {% endfor %}
    ];

    let sequenceIndex = 0;
    let currentScrollY = window.scrollY;
    let rollbackCounter = 0;
    let scrolling = false;

    function startScrolling() {
        if (!scrolling && sequenceIndex < scrollSequence.length) {
            scrolling = true;
            autoScroll(scrollSequence[sequenceIndex]);
        }
    }

    function autoScroll(step) {
        if (scrolling) {
            if (currentScrollY < step.end) {
                currentScrollY += step.speed / 10; // 减小每次滚动的增量
                window.scrollTo(0, currentScrollY);
                requestAnimationFrame(() => autoScroll(step)); // 使用requestAnimationFrame替代setTimeout
            } else {
                if (rollbackCounter < step.rollbackTimes) {
                    rollbackCounter++;
                    currentScrollY = step.rollbackTo;
                    window.scrollTo(0, currentScrollY);
                    requestAnimationFrame(() => autoScroll(step));
                } else {
                    rollbackCounter = 0;
                    sequenceIndex++;
                    if (sequenceIndex < scrollSequence.length) {
                        startScrolling();
                    } else {
                        scrolling = false;
                    }
                }
            }
        }
    }

    function stopScrolling() {
        scrolling = false;
    }

    function toggleScrolling() {
        if (scrolling) {
            stopScrolling();
        } else {
            startScrolling();
        }
    }

    document.getElementById('startScroll').addEventListener('click', startScrolling);
    document.getElementById('stopScroll').addEventListener('click', stopScrolling);

    document.addEventListener('keydown', function (event) {
        if (event.code === 'Space') {
            event.preventDefault();
            toggleScrolling();
        }
    });
</script>

</body>
</html>
